import {nextTick, onMounted} from "vue";

const directives = {
    install(app) {
        install(app);
    }
};


// 这里定义捕获main元素节点
let mainDom = null;

function install(app) {
    app.directive("touch", {
        mounted(el) {
            el.addEventListener("click", (event) => {
                let classNames = el.className?.split(" ") ?? [];
                if (classNames.indexOf("touch") === -1) {
                    classNames.push("touch");
                    changeClass(classNames);
                }
                setTimeout(()=>{
                    let classNames = el.className?.split(" ") ?? [];
                    let index = classNames.indexOf("touch");
                    if (index >= 0) {
                        classNames.splice(index, 1);
                        changeClass(classNames);
                    }
                },50)
            });
            function changeClass(classNames) {
                el.className = classNames.join(" ");
            }
        }
    });
    app.directive("loadData", {
        mounted(el,binding) {
            let maxHeight = 0;
            function getScrollPercentage(event){
                let dom = event.target;
                let scrollTop = Math.ceil(dom.scrollTop);
                let domHeight = dom.clientHeight;
                let scrollHeight = dom.scrollHeight - domHeight;
                let percentage = (scrollTop / scrollHeight * 100).toFixed(2);
                return percentage;
            }
            function listen(event){
                let dom = event.target;
                if (look){
                    return;
                }

                let percentage = getScrollPercentage(event);
                if(percentage > 99){
                    if(dom.scrollHeight === maxHeight){
                        return;
                    }
                    console.log(dom.scrollHeight,dom.scrollHeight)
                    maxHeight = dom.scrollHeight;
                    callFunction(binding,percentage);
                }
            }
            function callFunction(binding,percentage){
                if(typeof binding.value ==='function'){
                    let result = binding.value(percentage,event);
                    if(result instanceof Promise){
                        look = true;
                        result.then(()=>{
                            look = false;
                        }).catch(()=>{
                            look = false;
                        });
                    }
                    if(typeof result === 'object'){
                        let runnable = result.runnable;
                        let callback = result.callback;
                        let type = typeof runnable;
                        // 格式 {runnable:[Promise],callback:Function}
                        if(Array.isArray(runnable)){
                            look = true;
                            Promise.all(runnable).then(ress =>{
                                look = false;
                                callback(ress);
                            }).catch((err)=>{
                                look = false;
                                callback(null,err);
                            });
                        }
                        // 格式 {runnable:Promise,callback:Function}
                        else if(runnable instanceof Promise){
                            look = true;
                            runnable.then((res)=>{
                                look = false;
                                callback(res);
                            }).catch(err => {
                                look = false;
                                callback(null,err);
                            });
                        }
                        // 格式 {callback:Function}
                        else{
                            if(typeof callback === 'function'){
                                callback();
                            }
                        }
                    }
                }
            }
            let isMain = binding.modifiers.main;
            let immediate = binding.modifiers.immediate;
            let look = false;
            if(immediate){
                callFunction(binding,0);
            }
            if(isMain){
                if(mainDom === null){
                    mainDom = document.querySelector(".main");
                }
                mainDom.addEventListener("scroll",listen);
            }else{
                el.addEventListener("scroll",listen);
            }
        }
    });
}

export default directives;